<!-- 首页实验室统计 -->
<template>
  <div class="wrap-laboratory-info">
    <p class="wrap-info-title">
      实验室数量：<span>{{ DataCount }}</span
      >（个）
    </p>
    <ul>
      <li v-for="(item, index) in dataArr" :key="index">
        <img :src="item.img" alt="" class="warp-info-img" />
        <div>
          <span class="wrap-info-name">{{ item.name }}实验室</span>
          <span class="wrap-info-count">{{ item.count }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      DataCount: {
        type: Number,
        default: 0
      },
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {}
    },
    components: {},
    computed: {
      dataArr: {
        get () {
          const arr = this.dataList.map(item => {
            return {
              name: item.type,
              count: item.count,
              img: this.dataFormatImg(item.type)
            }
          })
          return arr
        }
      }
    },
    created () {},
    mounted () {},
    methods: {
      dataFormatImg (name) {
        let icon = ''
        switch (name) {
          case '化学':
            icon = require('@/assets/images/viewIcon/icon_sy_hxsys.png')
            break
          case '生物':
            icon = require('@/assets/images/viewIcon/icon_sy_swsys.png')
            break
          case '机电':
            icon = require('@/assets/images/viewIcon/icon_sy_jdsys.png')
            break
          case '电子':
            icon = require('@/assets/images/viewIcon/icon_sy_dzsys.png')
            break
          case '其他':
            icon = require('@/assets/images/viewIcon/icon_sy_qtsys.png')
            break
          default:
            break
        }
        return icon
      }
    }
  }
</script>
<style lang="less" scoped>
  .wrap-laboratory-info {
    z-index: 4;
    height: 55%;
    position: relative;
    width: 100%;
    overflow: hidden;
    .wrap-info-title {
      font-size: 22px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 60px;
    }
    ul {
      height: 75%;
      li {
        height: 20%;
        width: 100%;
        display: flex;
        align-items: center;
        div {
          margin-left: 24px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .wrap-info-name {
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
          }
          .wrap-info-count {
            font-size: 26px;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
            line-height: 37px;
          }
        }
      }
    }
  }
  @media screen and (max-height: 800px) {
    .wrap-info-name {
      font-size: 12px !important;
    }
    .wrap-info-count {
      font-size: 18px !important;
      line-height: 1.1 !important;
    }
    .wrap-info-title {
      font-size: 18px !important;
    }
  }
</style>
